<!--  -->
<template>
  <div class="files-add-basic">
    <el-form :inline="true" size="mini" class="demo-form-inline">
      <div class="border">
        <el-form-item label="上传凭证：">
          <el-select
            v-model="typeName"
            placeholder="请选择"
            @change="changeScanAccount"
          >
            <el-option key="scanall" label="--全部--" value="--全部--">
            </el-option>
            <el-option
              v-for="item in reimburBillType"
              :key="item.value"
              :label="item.value"
              :value="item.key"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="info" size="small" @click="gobackEdit"
            >返回</el-button
          >
        </el-form-item>
      </div>
    </el-form>
    <div class="scan-file-list">
      <div
        class="image-box"
        v-for="(item, index) in showImageList"
        :key="item.filePath"
      >
        <div class="ImgItem">
          <div class="pic-op-btn">
            <i
              class="el-icon-download pic-download-icon"
              @click="downloadImg(item, index)"
              title="下载"
            ></i>
          </div>
          <el-image
            style="width: 100%; height: 120px"
            :src="item.fileShowPath"
            :preview-src-list="srcList"
            fit="contain"
          >
          </el-image>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getAnnexList } from "@/api/files/basics";
import { dictReimburBillType } from "@/api/index";
export default {
  components: {},
  props: ["referObj"],
  data() {
    return {
      typeName: "",
      reimburBillType: null,
      imageList: [],
      showImageList: [],
      srcList: [],
      loading2: false,
    };
  },
  computed: {},
  watch: {},
  //方法集合
  methods: {
    //报销凭证类型
    getReimburBillType() {
      let params = {
        eimbursementTypeId: this.referObj.reimbursementTypeKey,
      };
      dictReimburBillType(params).then((res) => {
        if (res.code == 200) {
          this.reimburBillType = res.data;
          this.typeName == "--全部--";
          this.getAnnexList();
        } else {
          this.$message.warning(res.msg);
        }
      });
    },
    //获取个人附件信息
    getAnnexList() {
      this.loading2 = true;
      let data2 = { personnelId: this.referObj.referId };
      getAnnexList(data2).then((res) => {
        if (res.code == 200) {
          this.loading2 = false;
          let imageList = [];
          res.data.forEach((item) => {
            let obj = {
              id: item.id,
              fileShowPath: item.fileShowPath, //预览地址
              filePath: item.filePath, //下载地址
              fileName: item.fileName,
              typeName: item.typeName,
            };
            imageList.push(obj);
          });
          this.imageList = imageList;
          if (this.typeName == "--全部--" || !this.typeName) {
            this.showImageList = JSON.parse(JSON.stringify(this.imageList));
          } else {
            this.showImageList = this.sortImgList(
              this.imageList,
              this.typeName
            );
          }
          this.getSrcList();
        } else {
          this.loading2 = false;
          this.$message.warning(res.msg);
        }
      });
    },
    annexChange(value) {
      if (value == "--全部--") {
        this.showImageList = JSON.parse(JSON.stringify(this.imageList));
      } else {
        this.showImageList = this.sortImgList(this.imageList, value);
      }
      this.getSrcList();
    },
    getSrcList() {
      let srcList = [];
      this.showImageList.forEach((item) => {
        srcList.push(item.fileShowPath);
      });
      this.srcList = srcList;
    },
    gobackRefer() {
      this.$emit("gobackRefer");
    },
    //下载图片
    downloadImg(item) {
      //window.location.href = item.path;
      var a = document.createElement("a"); // 创建一个<a></a>标签
      a.href = process.env.VUE_APP_BASE_API + item.filePath; //重点（如测试发现下载文件不存在/找不到，检查路径）
      a.download = item.fileName ? item.fileName : this.fileName; // 设置下载文件文件名
      a.style.display = "none"; // 隐藏a标签
      document.body.appendChild(a); // 将a标签追加到文档对象中
      a.click(); // 模拟点击了a标签，会触发a标签的href的读取，浏览器就会自动下载了
      a.remove(); // 一次性的，用完就删除a标签
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.getReimburBillType();
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
</style>